<!-- Project page -->
<div class="page" id="projects">
	<h2>Projects</h2>
	<table class="tablesorter">
		<thead>
			<tr>
				<th width="10px;"><input type="checkbox" onclick="selectAllProjects(this.checked);"/></th>
				<th>Name</th>
				<th>Members</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td>Loading.....</td>
				<td>Loading.....</td>
			</tr>
		</tbody>
	</table>
	<div class="gridNav">
		<img class="button" title="Delete" src="images/delete.png" onclick="deleteProjects();"/>
		<img class="button" title="Add" src="images/add.png" onclick="addProject();"/>
		<img class="button" title="Search" src="images/search.png" onclick="searchProjects();"/>
	</div>

	<script>
		function editProject(){
			var project = $(this).parents("tr").attr("project");
			window.location = "#/projects/edit/" + project.id;
		}

		function selectAllProjects(checked){
			if(checked){
				$("#projects input[@type=checkbox]").attr('checked', 'checked');
			} else {
				$("#projects input[@type=checkbox]").attr('checked', '');
			}
		}

		var users = null;
		function loadUsers(){
			// Load the users list once
			if(users == null){
				boto_web.all("data/users",
					function(data){
						if(data && data.length){
							$("#projects_edit_members").empty();
							users = data;
							for(var x=0; x < data.length; x++){
								u = data[x];
								var user_div = document.createElement("div");
								user_div.className = "floatBox";
								var user_div_checkbox = document.createElement("input");
								user_div_checkbox.type = "checkbox";
								user_div_checkbox.name = "members";
								user_div_checkbox.value = u.id;
								user_div.appendChild(user_div_checkbox);
								var user_div_text = document.createTextNode(u['username']);
								user_div.appendChild(user_div_text);
								$("#projects_edit_members").append(user_div);
							}
						}
						loadProjects(function(data){
							$(".page#projects table tbody").empty();
							for(var x=0; x < data.length; x++){
								p = data[x];
								var row = document.createElement("tr");
								row.className = "selectable";
								row.project = p;
								var el_select = document.createElement("td");
								var el_select_checkbox = document.createElement("input");
								el_select_checkbox.type = "checkbox";
								el_select_checkbox.name = "project";
								el_select_checkbox.value = p.id;
								el_select.appendChild(el_select_checkbox);
								var el_name = document.createElement("td");
								el_name.className = "button";
								$(el_name).click(editProject);
								el_name.innerHTML = p['name'];
								var el_members = document.createElement("td");
								for(var y=0; y < p['members'].length; y++){
									var m = getUser(p['members'][y].id);
									var member_link = document.createElement("a");
									member_link.className = "object";
									member_link.href = m.id;
									member_link.innerHTML = m.username;
									el_members.appendChild(member_link);
								}
								el_members.className = "button";
								$(el_members).click(editProject);

								row.appendChild(el_select);
								row.appendChild(el_name);
								row.appendChild(el_members);
								$(".page#projects table tbody").append(row);
							}
							$("table.tablesorter").trigger("update"); 
						});
					}
				);
			}
		}

		function getUser(id){
			for(var x=0; x < users.length; x++){
				var user = users[x];
				if(user.id == id){
					return user;
				}
			}
			return null;
		}
		function getProject(id){
			for(var x=0; x < projects.length; x++){
				var project = projects[x];
				if(project.id == id){
					return project;
				}
			}
			return null;
		}

		function addProject(){
			$("#projects_edit input[@name='id']").val("");
			$("#projects_edit input[@name='name']").val("");
			$("#projects_edit textarea[@name='description']").val("");
			$("#projects_edit input[@type='checkbox']").attr('checked', false);
			window.location = "#/projects/edit";
		}
		var projects = null;
		function loadProjects(fnc){
			if(projects == null){
				boto_web.all(
					"data/projects",
					function(data){
						if(data && data.length){
							projects = data;
							if(fnc){
								fnc(projects);
							}
						}
					}
				);
			} else {
				if(fnc){
					fnc(projects);
				}
			}
		}
		function projects_loader(){
			loadUsers();
		}

		// Delete selected projects
		function deleteProjects(){
			if(confirm("Are you sure you want to delete these projects?")){
				$("#projects input[@type='checkbox'][@name='project']").each(function(){
					if(this.checked){
						boto_web.del("data/projects/" + this.value);
						$(this).parents("tr").hide();
					}
				});
			}
		}
		$(".page#projects").bind('load', projects_loader);
	</script>
</div>
<!--#include virtual="projects_edit.html"-->
<!-- /Project Page -->
